<template>
  <div>
    <!-- <div>HeadView</div> -->
    <el-form ref="form" :model="form" label-width="80px">
      <div v-for="item in headItems" :key="item.label">
        <el-form-item :label="item.label">
          <el-input class="input-command" v-if="item.type=='text'" v-model="form[item.label]"></el-input>
          <el-input-number
            class="input-command"
            v-if="item.type=='number'"
            v-model="form[item.label]"
            :min="item.range[0]"
            :max="item.range[1]"
            :label="item.label"
          ></el-input-number>
          <el-select
            class="input-command"
            v-if="item.type=='select'"
            v-model="form[item.label]"
            :placeholder="item.label"
          >
            <el-option v-for="option in item.options" :key="option" :label="option" :value="option"></el-option>
          </el-select>
          <el-radio-group
            class="input-command"
            v-if="item.type=='radio'"
            v-model="form[item.label]"
          >
            <el-radio v-for="option in item.options" :key="option" :label="option">{{option}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
    </el-form>
    <br />
    <div style="text-align:center">
      <el-alert v-if="errMsg" :title="errMsg" type="error"></el-alert>
      <br />
      <el-button @click="handleNext" type="primary" style="width:50%">下一步</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "headView",
  data() {
    return {
      form: {},
      errMsg: "",
    };
  },
  computed: {
    ...mapState(["current", "content", "defaultHead"]),
    headItems() {
      if (this.content.head) return this.content.head;
      return this.defaultHead;
    },
  },
  methods: {
    setDefault() {
      for (let i = 0; i < this.headItems.length; i++) {
        // this.form[this.headItems[i].label] = 0;
        this.form[this.headItems[i].label] = this.headItems[i].default;
      }
      this.form = JSON.parse(JSON.stringify(this.form));

      console.log(this.form);
    },

    handleNext() {
      console.log(JSON.stringify(this.form));
      if (this.checkInput()) {
        this.$store.commit("SET_CURRENT_HEADER", this.form);
        this.$emit("switch");
      }
    },
    checkInput() {
      this.errMsg = "";
      for (let i = 0; i < this.headItems.length; i++) {
        // console.log(this.form[this.headItems[i].label]);
        if (!this.form[this.headItems[i].label]) {
          this.errMsg =
            "您还未输入“" +
            this.headItems[i].label +
            "”，请完整输入每项内容";
          console.log(this.errMsg);
          return false;
        }
      }
      return true;
    },
  },
  mounted() {
    this.setDefault();
  },
};
</script>

<style scoped>
.input-command {
  width: 100%;
}
</style>